<template>
  <a-drawer :visible="visible" width="1200" title="详情" @close="onClose">
    <div class="title-box">
      <span class="title">月份：{{ detail.month }} </span>
      <span class="title"
        >姓名/号码：
        <template v-if="detail.source == 3">
          <!-- 渠道 -->
          <span>{{ detail?.channelInfo?.name }}</span>
          <span v-if="detail?.channelInfo?.name">/</span>
          <span>{{ detail?.channelInfo?.phone }}</span>
        </template>
        <template>
          <!-- 团队 -->
          <span>{{ detail?.followInfo?.final_name }}</span>
          <span v-if="detail?.followInfo?.final_name">/</span>
          <span>{{ detail?.followInfo?.final_phone }}</span>
        </template>
      </span>
      <span class="title" v-if="detail.source != 3"
        >团队：{{ detail.team_name }}</span
      >
    </div>

    <div class="line-before">提成模板</div>

    <!--  -->
    <div class="subtitle-box" v-if="detail.source == 1">
      <a-table
        bordered
        :pagination="false"
        :columns="commissionColumns"
        :dataSource="detail?.commission_template?.divide_config"
      >
        <template #title>
          <a-row>
            <a-col span="5"
              >模板名称：{{ detail?.commission_template?.name }}
            </a-col>
            <a-col span="5"
              >升档方式：{{
                detail?.commission_template?.compute_type == 1
                  ? "无升档"
                  : compute_type?.commission_template?.compute_type == 2
                  ? "合同数量"
                  : "合同金额"
              }}</a-col
            >
            <a-col span="5">合同成交提成</a-col>
          </a-row></template
        >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key == 'title'">
            {{ record[column.key] }}</template
          >
          <template v-if="column.key == 'threshold'">
            {{ record["threshold"] == "0.00" ? 0 : record["threshold"] }}
          </template>
          <template v-if="column.key == 'divide_num'">
            {{ record.divide_num }}{{ unit }}</template
          >
        </template>
      </a-table>
    </div>

    <!-- 管理模板 -->
    <div class="subtitle-box" v-if="detail.source == 2">
      <a-table
        bordered
        :pagination="false"
        :columns="commissionColumns"
        :dataSource="detail?.commission_template?.manage_config"
      >
        <template #title>
          <a-row>
            <a-col span="5"
              >模板名称：{{ detail?.commission_template?.name }}
            </a-col>
            <a-col span="5"
              >升档方式：{{
                detail?.commission_template?.compute_type == 1
                  ? "无升档"
                  : compute_type?.commission_template?.compute_type == 2
                  ? "合同数量"
                  : "合同金额"
              }}</a-col
            >
            <a-col span="5">管理提成 </a-col>
          </a-row></template
        >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key == 'title'">
            {{ record[column.key] }}</template
          >
          <template v-if="column.key == 'threshold'">
            {{ record["threshold"] == "0.00" ? 0 : record["threshold"] }}
          </template>
          <template v-if="column.key == 'divide_num'">
            {{ record.divide_num }}{{ unit }}</template
          >
        </template>
      </a-table>
    </div>

    <!-- 渠道提成 -->
    <div class="subtitle-box" v-if="detail.source == 3">
      <a-table
        bordered
        :pagination="false"
        :columns="commissionColumns"
        :dataSource="detail?.commission_template?.channel_config"
      >
        <template #title>
          <a-row>
            <a-col span="5"
              >模板名称：{{ detail?.commission_template?.name }}
            </a-col>
            <a-col span="5"
              >升档方式：{{
                detail?.commission_template?.compute_type == 1
                  ? "无升档"
                  : compute_type?.commission_template?.compute_type == 2
                  ? "合同数量"
                  : "合同金额"
              }}</a-col
            >
            <a-col span="5">渠道提成 </a-col>
          </a-row></template
        >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key == 'title'">
            {{ record[column.key] }}</template
          >

          <template v-if="column.key == 'threshold'">
            {{ record["threshold"] == "0.00" ? 0 : record["threshold"] }}
          </template>
          <template v-if="column.key == 'divide_num'">
            {{ record.divide_num }} {{ unit }}</template
          >
        </template>
      </a-table>
    </div>

    <div
      style="display: flex; justify-content: space-between; align-items: center"
    >
      <div class="line-before">成交合同</div>
      <div style="color: #2681f3; font-size: 15px">
        <span class="mr-10">总佣金：{{ detail.commission_price }}元 </span>
        <span class="mr-10">已结算佣金：{{ detail.paid_price }}元</span>
        <span>待结算佣金：{{ detail.unpaid_price }}元</span>
      </div>
    </div>

    <div class="mt-10">
      <a-table
        :columns="columns"
        :dataSource="detail?.recordList"
        bordered
        :pagination="false"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key == 'lease_unit_price'">
            <span>{{
              record.lease_unit_price + record.lease_unit_price_unit
            }}</span>
          </template>
          <template v-if="column.key === 'contract_tags'">
            <template v-for="tag in record.contract_tags">
              <a-tag>{{ tag }}</a-tag>
            </template>
          </template>
        </template>
      </a-table>
    </div>
  </a-drawer>
</template>

<script>
import { ref, computed, watch, reactive, toRefs } from "vue";
import request from "../../../../common/utils/request";
import { template } from "lodash";

export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    id: {
      type: Number,
      default: 0,
    },
  },

  setup(props, context) {
    const state = reactive({
      detail: {},
    });
    const columns = [
      { title: "租客名称", key: "owner_name", dataIndex: "owner_name" },
      { title: "合同标签", key: "contract_tags", width: "10%" },
      { title: "开始日", key: "lease_starttime", dataIndex: "lease_starttime" },
      { title: "结束日", key: "lease_endtime", dataIndex: "lease_endtime" },
      { title: "租赁单价", key: "lease_unit_price" },
      { title: "签订日", key: "sign_time", dataIndex: "sign_time" },
      { title: "楼宇名称", key: "build_name", dataIndex: "build_name" },
      {
        title: "合同编码",
        key: "contract_number",
        dataIndex: "contract_number",
      },
      {
        title: "合同总金额",
        key: "contract_price",
        dataIndex: "contract_price",
      },
      {
        title: "预计所得佣金",
        key: "commission_price",
        dataIndex: "commission_price",
      },
    ];
    const commissionColumns = [
      {
        title: "档位名称",
        key: "title",
      },
      {
        title: "档位下限",
        key: "threshold",
      },
      {
        title: "提成",
        key: "divide_num",
      },
    ];

    const onClose = () => {
      context.emit("closeDetail");
    };

    const page = ref(1);
    const limit = ref(10);
    const total = ref(0);
    const pagination = computed(() => ({
      total: total.value,
      current: page.value,
      pageSize: limit.value,
      showSizeChanger: true,
    }));

    const handleTableChange = (pager) => {
      page.value = pager.current;
      limit.value = pager.pageSize;
    };

    const getSettleMentDetail = () => {
      const param = { approval_id: props.id };
      request
        .get("/org", "/business/customer/settleDetail", param)
        .then((res) => {
          console.log(res.detail);
          state.detail = res.detail;
        });
    };

    const init = () => {
      getSettleMentDetail();
    };

    watch(
      () => props.visible,
      (val) => {
        if (val == true) {
          init();
        }
      }
    );

    const unit = computed(() => {
      return state.detail?.commission_template?.divide_type == 3 ? "元" : "%";
    });

    return {
      columns,
      onClose,
      commissionColumns,
      handleTableChange,
      pagination,
      ...toRefs(state),
      unit,
    };
  },
};
</script>

<style lang="less" scoped>
.line-before {
  margin-left: 10px;
  height: 40px;
  line-height: 40px;
  position: relative;
  color: #333;
  font-size: 16px;
}

.line-before::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 10px;
  bottom: 10px;
  width: 4px;
  border-radius: 2px;
  background-color: #2681f3;
}

.title-box {
  padding: 15px 0;
  font-size: 18px;
  font-weight: 700;
  color: black;

  .title {
    margin-right: 25px;
  }
}

.subtitle-box {
  font-size: 15px;
  margin: 10px 0;
}
</style>
